<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>费用数据录入</title>
	
  <style>
        #outer{
        	margin:auto;
            width: 800px;
            height: 535px;
            background-color: #999999;
            border: solid black 1px;
        }
        #outer-in{
            height: 366px;
            width: 99%;
            border: solid 0px black;
            margin-top: 50px;
            background-color: white;
        }
        #outer-in #left{
            width: 200px;
            height: 100%;
            border: solid 0px black;
            float: left;
        }
        #outer-in #right{
            width: 578px;
            height: 100%;
            border: solid 1px black;
            float: right;
            overflow-y: auto;
			_overflow: auto;
        }
        #outer-in #left .left-top{
            width: 100%;
            height: 22px;
            border: solid 0px black;
            float: left;
        }
        #outer-in #left .left-top input{
            width: 60%;
            height: 78%;
            float: left;
            margin-top: 1px;
            text-align: center

        }
        #outer-in #left .left-top select{
            width: 37%;
            height: 100%;
        }

        #outer-in #left #left-bottom{
            width: 100%;
            height: 274px;
            border: solid 1px black;
            float: left;
        }
        #left-bottom table{
            border-collapse:collapse;
            border-spacing: 0px;
            width:100%;
            margin: auto;
            font-size: small;
        }
        #left-bottom td{
            text-align: center;
            border: solid black 1px;
        }
        #left #left-page{
            width:200px;
            height: 24px;
            border: solid 0px gold;
            position: absolute;
            top: 396px;
        }

        #left #left-page .left-page{
            width: 33%;
            height: 100%;
            float: left;
            text-align: center;
        }
        
        #left #left-page .left-page button{
        	width: 100%;
        }

        #right #right-top{
            width: 100%;
            height: 26px;
            border: solid 1px springgreen;
        }
        #right-top .right-top{
            float: left;
            height: 100%;
            width: 117px;
            border: solid 0px salmon;
        }
        #right-top .right-top button{
            width: 117px;
            height: 100%;
        }
        #right table{
        	display:none;
            border-collapse:collapse;
            border-spacing: 0px;
            width:577px;
            margin: auto;
            font-size: x-small;
        }
        #right table td{
            text-align: center;
            white-space:nowrap;
            border: solid 1px green;
        }
	    #right table td input,select {
            width: 97%;
        }
        #right table td button {
            width: 50px;
        }
        #right .right-middle{
            width: 40%;
            height: 26px;
            border: solid 0px gold;
            position: absolute;
            top: 385px;
        }
        #right .right-middle input{
            width: 100px;
            margin-left: 230px;
        }

    </style>
    <script type="text/javascript" src="../JS/jquery.1.9.1.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/JS/public/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
 <div id="outer">
	<div id="outer-in">     
         <div id="left">      
            <div class="left-top">
                <input type="text" value="所属大楼">
                <select name="inhabitant_House.block" class="block">
                    <option value="'A'">A</option>
                    <option value="'B'">B</option>
                    <option value="'C'">C</option>
                    <option value="'D'">D</option>
                    <option value="'E'">E</option>
                </select>
            </div>
            <div class="left-top">
                <input type="text" value="单元号">
                <select name="inhabitant_House.unit" class="unit">
                    <option></option>
                    <option value="1">1单元</option>
                    <option value="2">2单元</option>
                    <option value="3">3单元</option>
                </select>
            </div>
            <div class="left-top">
                <input type="text" value="房间号">
                <select name="inhabitant_House.room_number" class="room_number">
                    <option></option>
                    <option value="101">101</option>
                    <option value="102">102</option>
                    <option value="103">103</option>
                    <option value="104">104</option>
                    <option value="201">201</option>
                </select>
            </div >
            
            <div class="left-top" style="height: 26px">
                <input type="submit" value="筛选" style="width: 99%" onclick="selectH_id(3)">
            </div>         
	       
	       	<!-- 该div通过Ajax引入selectTable.jsp页面 -->
	            <div id="left-bottom"></div>
	                     
            </div>
         
            <div id="right">
                <div id="right-top">
                    <div class="right-top"><button onclick="exchangeTable1()">住户水电数据</button></div>
                    <div class="right-top"><button onclick="exchangeTable2()">公用水电数据</button></div>
                    <div class="right-top"><button onclick="exchangeTable3()">服务数据</button></div>
           </div>
                
            <!-- 录入住户数据表格，连接到costdataentryAction的inputWaterAndElectricity()方法 -->
                <table id="user">
                    <tr>
                        <td>房间代码</td>
                        <td>数据年月</td>
                        <td>项目名称</td>
                        <td>上次读数</td>
                        <td>本次读数</td>
                        <td>计费用量</td>
                        <td>操作</td>
                    </tr>
                    <tr class="appendUser">
                        <td class="addh_id" id="addinputh_id" style="width: 60px;"></td>
                        <td class="hide"><input name="waterAndElectricity.this_date" id="this_date" class="Wdate" type="text" onClick="WdatePicker()"></td>
                        <td class="hide" style="width:70px" >水表</td>
                        <td class="hide"><input type="number" min="0" name="waterAndElectricity.last_water_amount" id="last_water_amount"></td>
                        <td class="hide"><input type="number" min="0" name="waterAndElectricity.this_water_amount" id="this_water_amount"></td>
                        <td class="hide" id="conut_water" style="width: 60px;"></td>
                        <td class="hide"><button onclick="conut1()">计算</button></td>
                    </tr>
                    <tr class="appendUser">
                        <td class="hide" id="addinputh_id1" style="width: 60px;"></td>
                        <td class="hide"><input name="waterAndElectricity.this_date" class="Wdate" type="text" onClick="WdatePicker()"></td>
                        <td class="hide" style="width:70px">电表</td>
                        <td class="hide"><input type="number" min="0" name="waterAndElectricity.last_electricity_amount" id="last_electricity_amount"></td>
                        <td class="hide"><input type="number" min="0" name="waterAndElectricity.this_electricity_amount" id="this_electricity_amount"></td>
                        <td class="hide" id="conut_electricity" style="width: 60px;"></td>
                        <td class="hide"><button onclick="conut2()">计算</button></td>
                    </tr>
	                </table>
	               	<div class="right-middle" id="right-middle1">
	                    <input type="submit" value="录入数据" onclick="saveWater()">
	                </div> 

                <table id="public">
                    <tr>
                        <td>水表上月读数</td>
                        <td>水表本月读数</td>
                        <td>电表上月读数</td>
                        <td>电表本月读数</td>
                        <td>抄表人</td>
                        <td>本月抄表日期</td>
                        <td>表名</td>
                        <td>表编号</td>
                    </tr>
                    <tr id="appendPublic">
                        <td class="hide"><input type="text" id="p_last_water_amount"></td>
                        <td class="hide"><input type="text" id="p_this_water_amount"></td>
                        <td class="hide"><input type="text" id="p_last_electricity_amount"></td>
                        <td class="hide"><input type="text" id="p_this_electricity_amount"></td>
                        <td class="hide"><input type="text" id="people"></td>
                        <td class="hide"><input class="Wdate" type="text" onClick="WdatePicker()" id="write_date"></td>
                        <td class="hide"><input type="text" id="table_name"></td>
                        <td class="hide"><input type="text" id="table_number"></td>
                    </tr>
                </table>
                <div class="right-middle" id="right-middle2">
                    <input type="submit" value="录入数据" onclick="savepublicwater()">
                </div> 
                
                <table id="service">
                    <tr>
                        <td>房间代码</td>
                        <td>服务人员代码</td>
                        <td>服务开始日期</td>
                        <td>服务结束日期</td>
                        <td>服务人员要求</td>
                        <td>住户评价</td>
                        <td>备注</td>
                    </tr>
                    <tr id="appendService">
                        <td class="hide" id="addh_id1"></td>
                        <td class="hide"><input type="text" id="e_id"></td>
                        <td class="hide"><input class="Wdate" type="text" onClick="WdatePicker()" id="begin_service_time"></td>
                        <td class="hide"><input class="Wdate" type="text" onClick="WdatePicker()" id="end_service_time"></td>
                        <td class="hide"><input type="text" id="demand"></td>
                        <td class="hide"><input type="text" id="evaluation"></td>
                        <td class="hide"><input type="text" id="note"></td>
                    </tr>
                </table>
                 
                <div class="right-middle" id="right-middle3">
                    <input type="submit" value="录入数据" onclick="saveService()">
                </div>      
            </div>                          
        </div>      
    </div>
</body>
	<script type="text/javascript">
		function exchangeTable1(){	
			if ($("#user").css("display") == "none") {  		  
			    $("#user").show(500,null);  
			    $("#public").hide();  
			    $("#service").hide();
			    $("#right-middle1").show();
			    $("#right-middle2").hide();
			    $("#right-middle3").hide(); 
			}
	
		}
		function exchangeTable2(){
			if ($("#public").css("display") == "none") {  		  
				$("#public").show(500,null); 
			    $("#user").hide(); 
			    $("#service").hide(); 
			    $("#right-middle2").show();
 			    $("#right-middle1").hide();
			    $("#right-middle3").hide(); 
			}
		}
		function exchangeTable3(){
			if ($("#service").css("display") == "none") {  		  
				$("#service").show(500,null);  
			    $("#public").hide(); 
			    $("#user").hide();
			    $("#right-middle3").show();
 			    $("#right-middle1").hide();
			    $("#right-middle2").hide(); 
			}
		}
		function conut1(){
			if($("#this_water_amount").val() > $("#last_water_amount").val()){
				$("#conut_water").html($("#this_water_amount").val()-$("#last_water_amount").val());
			}else{
				alert("本次读数必须大于上次读数");
			}
			
		}
		function conut2(){
			if($("#this_electricity_amount").val() > $("#last_electricity_amount").val()){
				$("#conut_electricity").html($("#this_electricity_amount").val()-$("#last_electricity_amount").val());
			}else{
				alert("本次读数必须大于上次读数");
			}
			
		}
		

	</script>
	
	<script type="text/javascript" src="../JS/selectH_id.js"></script>
	<script type="text/javascript" src="../JS/saveWater.js"></script>
	<script type="text/javascript" src="../JS/savepublicwater.js"></script>
	<script type="text/javascript" src="../JS/saveService.js"></script>
</html>